<template>
	<view class="container">
		<view class="texarBox">
			<view class="tips text-lg">
				请写下您对我们的反馈意见
			</view>
			<textarea class="utext_area" placeholder-class="plcarea" v-model="form.vcontent" placeholder="针对我们的菜品，您有什么口味，或者烹饪上的建议以及想吃的菜品，都可以告诉我们哦！" />
			<view class="tips text-lg">
				联系方式
			</view>
			<view class="com_pro flex align-center">
				<input class="cinput" maxlength="20" type="number" placeholder-class="plcarea" placeholder="如果方便 , 请留下您的电话号码" v-model="form.vphone" />
			</view>
		</view>
		<view class="full_btn fixed">
			<view class="mbtn" @click="questionEdit">
				提交
			</view>
		</view>
		<loading></loading>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from "vue";
	import { mnavTo } from '@/utils/helper';
	import { complainSave } from '@/api/vmeitime-http/index.js';
	import { showLoading, hideLoading } from '@/utils/helper';
	import mapi from '@/utils/mapi';
	const form=ref({
		vphone:"",
		vcontent:"",
    channel:'1114'
	})
	const questionEdit =async ()=>{
		if(form.value.vcontent==''){
			mapi.msg("您还未输入内容!")
			return
		}
		if(form.value.vphone!=''){
			let reg=/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
			let result=reg.test(form.value.vphone)
			if(!result){
				mapi.msg("请输入正确的电话号码!")
				return
			}
		}
		try{
			showLoading()
			let res=await complainSave(form.value)
			hideLoading()
			if(!res.result){
				mapi.msg(res.shortMessage||'网络繁忙，请稍后再试')
				return
			}
			uni.navigateBack();
			mapi.msg("提交成功，感谢您的反馈!")
		}catch(e){
			console.error(e)
		}
		
	}
	
</script>

<style lang="scss">
.pageContent,page{
	background: #fff;
}
.com_pro{
	margin-top: 26rpx;
	padding: 0 32rpx;
	font-size: 28rpx;
	.cinput{
		width: 100%;
	}
}
.texarBox{
	padding: 0 30rpx;
	.tips{
		padding-top: 40rpx;
	}
	.utext_area{
		margin-top: 22rpx;
		width: 100%;
		height: 470rpx;
		background: #FFFFFF;
		box-shadow: 0px 5rpx 25rpx rgba(105, 105, 105, 0.07);
		border-radius: 8px;
		padding: 32rpx;
		font-size: 28rpx;
	}
	
}
.plcarea{
		color: #8D95A1;
		font-size: 28rpx;
}	
</style>
